<template>
  <div class="about">
    <h1>This is an about page</h1>
    <f-crud
      :config="config"
      :data="dataList"
      @submit-search="handleSearch"
      @reset-search="handleSearch"
      @page-change="handlePageChange"
      :page="page"
    >
    </f-crud>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import FCrud from "@/components/f-crud/index";
import {defineCrudConfig} from '@/components';

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 100
});
const dataList = reactive([{username: '张三', age: 19}]);
const config = defineCrudConfig({
  showColumnToggle: true,
  collapsible: true,
  attrs: {
    style: "color:red",
  },
  $dialog: {
    on: {
      open() {
        console.log(123)
      }
    }
  },
  $table: {
    on: {
      'row-click': row=>{
        console.log(123)
      }
    }
  },
  columns: [
    {
      field: "username",
      label: "用户名",
      editable: true,
      $search: {
        on: {
          // change: (row) => {
          //   console.log(1111);
          // },
        },
        value: "111",
      },
    },
    {
      field: "age",
      label: "年龄",
      options: [
        {text: "1", value: 1},
        {text: "2", value: 2},
      ],
      $dialog: {
        type: 'switch',
        value: true,
      },
      $search: {
        type: "select",
        value: 1,
        props: {},
        on: {
          change: (row) => {
            console.log(1111);
          },
        },
      },
    },
    {
      field: "sex",
      label: "性别",
    },
  ],
  handlerList: [
    {
      label: "编辑",
      props: {
        icon: 'Edit'
      }
    },
  ],
});
const handleSearch = function (params) {
  console.log(params);
};
const handlePageChange = function (e) {
  console.log(e);
};
</script>
